<template>
  <div class="app-container">
   <el-col :span="6">
    <el-row >
     <el-form
      ref="form"
      :inline="true"
      :model="formData"
      class="demo-form-inline"
      @submit.native.prevent="queryDetailByInput"
    >
      <el-form-item style="width: 100%;">
        <el-input
          style="width: 100%"
          ref="keywordsInput"
           clearable
          v-model="formData.keywords"
          placeholder="请输入订单号、水洗码、物流单号，或者扫描物流单号、水洗码"
        >
          <template slot="append">
            <el-button
              icon="el-icon-search"
              @click="queryDetailByInput"
            ></el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    </el-row>
    <el-row style="background-color: #F2F2F2; height: 100%; width: 100%; padding-left: 20px; padding-bottom: 250px;
     padding-right: 15px;padding-top: 10px;">
    <div    class="searchData">
       <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>订单信息</span>
        </div>
        <div class="margin15">门店名称：{{detail.washShop}}</div>
        <div class="margin15">订单号：{{detail.orderNo}}</div>
        <div class="margin15">手机号码：{{detail.customPhone}}</div>
        <div class="margin15">渠道：{{orderComeFromMap[detail.comeFrom]}}</div>
        <div>商品信息：{{detail.shopName}}</div> 
        <div class="margin15" style="margin-top: 15px;">物流单号：{{detail.wayBillCodeNameList}}</div>
         <div class="margin15">客户备注：{{detail.customerRemark}}</div>      
        <div class="margin15">商家备注：{{detail.shopRemark}}</div>
        </el-card>
         </div>
   </el-row>
   </el-col>

 <el-col :span="18" style="padding-top:62px;" >
  <div  class="zjtipMsg" v-if="showZjTipMsg">
    <div class="zj_tips">
        <svg t="1759894944255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4659" width="64" height="64"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F25643" p-id="4660"></path><path d="M512.036571 805.339429a63.670857 63.670857 0 0 1-58.514285-67.693715 63.670857 63.670857 0 0 1 58.514285-67.693714 63.670857 63.670857 0 0 1 58.514286 67.693714 63.670857 63.670857 0 0 1-58.514286 67.693715z m-19.163428-586.715429h38.253714a42.422857 42.422857 0 0 1 39.094857 45.129143v2.56l-15.616 315.904a42.020571 42.020571 0 0 1-39.058285 42.569143h-7.094858a42.020571 42.020571 0 0 1-39.058285-42.569143l-15.579429-315.904a43.300571 43.300571 0 0 1 36.827429-47.542857z" fill="#FFFFFF" p-id="4661"></path></svg>
        <span style="margin-left: 40px;">配饰需要全部质检后，才可打印物品质检码</span>
    </div>
  </div>

   <tableTongji @zjTipMsg="showTipsMsg_fn" :orderDetail="detail" :orderStatus="detail.status"  :scene="scene" @close-ywyj-event="closeDrawer" :orderId="detail.id" :rollbackFn="scene=='ywyj' ? handleRowClick:()=>{}" :scanPhoto="scanPhoto" :tableData="detail.shoePoList" :shopId="detail.shopId"></tableTongji>

   <div class="ywyj_content_footer" v-if="true">

    
  <!-- <el-button  @click="submitInStorage(2)">取消</el-button> -->
      
  <!-- <el-button >信息暂存</el-button> -->
  
       
  <el-button @click="submitInStorage(1)" v-if="scene == 'ywyj' && (detail.status == 2 || detail.status == 1)" :loading="loading">确认入库所有商品</el-button>
 
  <el-button @click="submitInStorage(2)" v-if="scene == 'ywyj' && (detail.status == 3)" :loading="loading">取消入库添加新商品</el-button>


   </div>

 </el-col>

<ywyj_drawer :detail="detail" :shoeDetail="shoeDetail" v-if="drawer" :drawer="drawer" :washCode="washCode" @close-ywyj-event="closeDrawer" @update-shoeDetail="updateShoeDetails" ></ywyj_drawer>

      <Photograph
        :photographVisible="photographVisible"
        :detail="detail"
        @success="success"
        @close="photographVisible = false"
      />

  </div>
</template>

<script>

import ywyj_drawer from './ywyj_drawer.vue';
import Photograph from '../Photograph/index.vue'
import tableTongji from './TableTongji.vue';
import { getShopDetail } from "@/api/shop/index";
import {
  getOrderDetailByMulType ,confimInStorage ,
  qualityInspectByWashCode,bindRackGridPo 
} from "@/api/order/index";
import {
  IMAGE_OSS_URL,
  washTypeList,
  orderComeFromMap
} from "@/config/index";
import { getCustomerDetailByPhone } from "@/api/customer/index";

export default {
  name: "Ywyj",
  components:{
    ywyj_drawer,
    Photograph,
    tableTongji
  },
  props:{
    scene:String
  },
  data() {
    return {
        showZjTipMsg:false,
        drawer:false,
        photographVisible:false,
        shoeDetail:{},
        detail:{},
        orderComeFromMap,
        loading:false,
        washCode:"455",
        drawerVisible:false,
        productListMap:{},
        queryParams:{
          total:0,
          page:1

        },
        formData:{
          keywords:"",//D20250829dycd00002  O20240928c00100027
          keywordsData:""
        }
       
      
    };
  },
  created() {

         this.washCode = "";
          this.$nextTick(() => {
          this.$refs.keywordsInput.focus();
        });
    
  },
  methods: {

  
    showTipsMsg_fn(){
      this.showZjTipMsg=true
      setTimeout(res=>{
        this.showZjTipMsg=false
      },3000)
    },

  submitInStorage(flag){
    
    let that=this
    //检查订单状态的类型是否更新，如果没有还是要
    let shoeNotItemTypeArr=this.detail.shoePoList.filter(res=> !res.itemType)
    // console.info(shoeNotItemTypeArr.length)
    // let shoeNotItemTypeArr=this.detail.shoePoList.filter(res=> !res.itemType)
    if(shoeNotItemTypeArr.length>0){
      this.$message.error("物品类型中有不完整商品，请检查")
      return
    }

    if(this.detail.shoePoList.length == 0){

        this.$message.error("请至少添加一个商品！！！")
        return
    }


    this.loading=true
    confimInStorage({orderId:this.detail.id,action:flag}).then(res=>{
      that.$message.success("操作成功")
        that.$nextTick(() => {
          that.$refs.keywordsInput.focus();
        });
      that.getDetail()
      // console.info(res)
    })


  },

  zhijianSubMit(){

      if(this.scene == 'zhijian'){

      //  console.info("进入预检")
       qualityInspectByWashCode({washCode:this.formData.keywordsData}).then(res=>{
              this.getDetail()

       })
   

      }
  },

   //扫码生成货架号
  creategrCode(orderId){
    if(this.scene == 'ywyj'){
      bindRackGridPo(orderId).then(res=>{
        // this.getDetail()
        this.detail={... this.detail}
      })
    }
 

  },

     getCustomerDetail(phone) {
      getCustomerDetailByPhone(phone).then((res) => {
        this.customerDetail = res.data;
      });
    },


    success(datas) {
      datas.forEach((data) => {
        const index = this.detail.shoePoList.findIndex(
          (item) => item.washCode === data.washCode
        );
        this.detail.shoePoList[index].picture = data.picture;
      });
      this.photographVisible = false;
    },

    scanPhoto(){
       this.photographVisible=true
      //  console.info("dis大撒大撒",this.detail)
      // this.getDetail()
      


    },

     getShopDetail(id) {
      getShopDetail(id).then((res) => {
        this.shopDetail = res.data;
      });
    },

    getListData({ page, limit }) {
      
    },

     getStatistics() {
       
    },


    closeDrawer(){
      this.drawer=false
      // console.info("关闭刷新")
      this.getDetail()
    },

   dayin(){
    // console.info("打印水洗唛")
   },

   updateShoeDetails(shoeDetail){
    // console.info("更新鞋子对象")
     this.shoeDetail=shoeDetail
   },

    handleRowClick(item){

      this.drawer=true
      // this.shoeDetail.picture=[]
      this.shoeDetail=item
      // console.info("传递的item",item)
     


    },


     getDetail() {
      let that=this
      this.loading = true;
      let keywords=this.formData.keywordsData
      if(!keywords){
        this.$message.error("请先输入订单号或水洗码")
        return
      }
      getOrderDetailByMulType(keywords)
        .then((res) => {
          let shopName=""
          res.data.orderGoodPoList.forEach(orderShopName=>{
                  shopName=shopName+"|"+orderShopName.name+"["+orderShopName.buyNum+"份]"
          })
          shopName=shopName.substring(1,shopName.length)
          res.data.shoePoList.forEach((item, index) => {
            item.picture = item.picture
              ? item.picture.split(",").map((key) => {
                  return {
                    url: IMAGE_OSS_URL + key,
                    status: "success",
                    data: key,
                  };
                })
              : [];
            item.washType =
              item.washType ||
              res.data.orderGoodPoList[0].washType ||
              washTypeList[0].value;

            item.index = `${index + 1}/${res.data.shoePoList.length}`;
          });
          this.pictureList = res.data.fittingImg
            ? res.data.fittingImg.split(",").map((key) => {
                return {
                  url: IMAGE_OSS_URL + key,
                  status: "success",
                  data: key,
                };
              })
            : [];
          this.detail = res.data;
          this.detail.shopName=shopName
          this.getShopDetail(res.data.shopId);
          this.getCustomerDetail(res.data.customPhone);
          this.creategrCode(this.detail.id)
          
          // 如果是线下订单，且订单状态为取鞋中或待入库，且鞋子信息为空
          if (
            res.data.comeFrom !== "1" &&
            (res.data.status === 2 || res.data.status === 1) &&
            (!res.data.shoePoList || res.data.shoePoList.length === 0)
          ) {
            this.confirmShoe.shoeNum = res.data.shoeNum;
            this.confirmShoeVisible = true;
          }
        })
        .then(() => {
          this.loading = false;
        })
        .catch((err) => {
          // console.log(err);
          this.loading = false;
          this.$emit("close");
        });
    },


    handleClick(){},
    
    queryDetailByInput(){
      // console.info("触发了")
      this.formData.keywordsData=this.formData.keywords
      this.formData.keywords=""
      this.getDetail()
      this.zhijianSubMit()
      
    },
  }
};
</script>

<style scoped lang="scss">


.searchData{
   


}

.footer{}

.ywyj_content_footer{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 50px;
    justify-content: flex-end;
}

.zjtipMsg{
  // width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  flex-direction: row;
  margin-bottom: 20px;
  line-height: 64px;


}

.zj_tips{ 
    display: flex;
    font-size: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: 64px;
     background-color: #F2F2F2;
     padding-left: 50px;
     padding-right: 55px;
}

::v-deep .el-form-item__content{
  width: 100%;
}

.margin15{
  margin-bottom: 15px;
  white-space: nowrap;
}


// #f8f8f9
</style>
